<template>
    <div class="">
        <el-dialog :title="isShow ? '添加活动' : '编辑活动'" :visible.sync="isShow" :before-close="cancel">
            <el-form :model="secklist" :rules="rules" ref="seckInfo">
                <el-form-item label="活动名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="secklist.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动期限" :label-width="formLabelWidth">
          <el-date-picker
            v-model="timer"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
                </el-form-item>
                <el-form-item label="一级分类" :label-width="formLabelWidth">
                    <el-select v-model="secklist.first_cateid" placeholder="请选择分类" @change="changeCate(false)">
                        <el-option v-for="item in catelist" :key="item.id" :value="item.id"
                            :label="item.catename"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" :label-width="formLabelWidth">
                    <el-select v-model="secklist.second_cateid" placeholder="请选择分类">
                        <el-option v-for="item in secondCateArr" :key="item.id" :value="item.id"
                            :label="item.catename"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品" :label-width="formLabelWidth">
                    <el-select v-model="secklist.goodsid" placeholder="请选择商品">
                        <el-option v-for="item in goodsList" :key="item.id" :value="item.id"
                            :label="item.goodsname"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="secklist.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>

</div>
</template>
<script>
import { seckAdd, seckEdit, getseckInfo } from '../../request/api'
import { mapGetters, mapActions } from 'vuex'
export default {
    props: ['isShow', 'isAdd'],
    data() {
        return {
            secklist: {
                title: '',
                begintime: '',
                endtime: '',
                first_cateid: '',
                second_cateid: '',
                goodsid: '',
                status: 1,
              
            }, 
             timer:null,
            rules: {
                title: [
                    { required: true, message: "请输入活动名称", trigger: "blur" },
                    {
                        min: 2,
                        max: 15,
                        message: "长度在 2 到 15 个字符",
                        trigger: "blur",
                    },
                ]
            },
            secondCateArr: [], //二级分类数组
            formLabelWidth: '120px'
        }
    },
    computed: {
        ...mapGetters({
            catelist: 'classify/getCate',
            goodsList: 'goods/getGoodsList',
        })
    },
    mounted() {
        this.getCateAction()
        this.getGoodsList()
        this.getSeckAction()
       
    },
    methods: {
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        reset() {
            this.secklist = {
                title: '',
                begintime: '',
                endtime: '',
                first_cateid: '',
                second_cateid: '',
                goodsid: '',
                status: 1
            };
            this.$refs.seckInfo.resetFields();
            this.timer=null

        },
        ...mapActions({
            getGoodsList: "goods/getGoodsListAction",
            getSeckAction: 'active/getSeckListAction',
            getCateAction: 'classify/changeCateAction'
        }),
        // 切换一级分类获取二级分类
        changeCate(n) {
            let index = this.catelist.findIndex((item) =>
                this.secklist.first_cateid == item.id
            )
            this.secondCateArr = this.catelist[index].children
            if (!n) {
                this.secklist.second_cateid = ''
            }
        },
        lookup(id) {
            getseckInfo({ id }).then((res) => {
                if (res.code == 200) {
                    this.secklist = res.list
                    this.secklist.id = id
                    this.timer=[
                        new Date(parseInt(this.secklist.begintime)),
                        new Date(parseInt(this.secklist.endtime))
                    ]
                    this.changeCate(true)
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        confirm() {
            this.$refs.seckInfo.validate((valid) => {
                if (valid) {
                    this.secklist.begintime=new Date(this.timer[0]).getTime()
                    console.log(this.secklist.begintime);
                    this.secklist.endtime=new Date(this.timer[1]).getTime()
                    if (this.isAdd) {
                        seckAdd(this.secklist).then((res) => {
                            if (res.code == 200) {
                                this.cancel()
                                this.getSeckAction()
                                this.$message.success(res.msg)
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        seckEdit(this.secklist).then((res) => {
                            // console.log(this.secklist.begintime);
                            if (res.code == 200) {
                                this.cancel()
                                this.getSeckAction()
                                this.$message.success(res.msg)
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>
<style scoped lang="scss"></style>